<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='playcanvas-stable.min.js'></script>
    <script src='playcanvas-gltf.js'></script>
    <!--script src='orbit-camera.js'></script-->
</head>
<body>
    <script>
      var canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      var app = new pc.Application(canvas, {
        mouse: new pc.Mouse(canvas)
      });
      app.start();
      // fill the available space at full resolution
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);
      app.scene.gammaCorrection = pc.GAMMA_SRGB;
      app.scene.toneMapping = pc.TONEMAP_ACES;
      // ensure canvas is resized when window changes size
      window.addEventListener('resize', function() {
        app.resizeCanvas();
      });
      // create camera entity
      var camera = new pc.Entity('camera');
      camera.addComponent('camera', {
        clearColor: [ 0.1, 0.8, 0 ],
        fov: 0.8 / Math.PI * 180
      });
      app.root.addChild(camera);
      camera.setPosition(0.482, 0.258, 0.836);
      camera.lookAt(0, 0, 0);
      app.assets.loadFromUrl('orbit-camera.js',"script", function (err, asset) {
        var script = asset.resource;
        camera.addComponent('script');
        camera.script.create('orbitCamera', {
          attributes: {
            distanceMax: 10,
            distanceMin: 0.3,
            pitchAngleMax: 90,
            pitchAngleMin: 0,
            inertiaFactor: 0.05,
            focusEntity: gltfRoot,
            frameOnStart: false
          }
        });
        camera.script.create('mouseInput', {
          attributes: {
            orbitSensitivity: 0.3,
            distanceSensitivity: 0.15,
          }
        });
      });
      // create directional light entity
      //var light = new pc.Entity('light');
      //light.addComponent('light',);
      //app.root.addChild(light);
      //light.setEulerAngles(45, 0, 45);
      // rotator script
      //var Rotate = pc.createScript('rotate');
      //Rotate.prototype.update = function (deltaTime) {
      //  this.entity.rotate(0, deltaTime * 20, 0);
      //};
      // glTF scene root that rotates
      var gltfRoot = new pc.Entity();
      //gltfRoot.addComponent('script');
      //gltfRoot.script.create('rotate');
      app.root.addChild(gltfRoot);
      app.assets.loadFromUrl('../assets/FlightHelmet/glTF/FlightHelmet.gltf', 'json', function (err, asset) {
        var json = asset.resource;
        var gltf = JSON.parse(json);
        loadGltf(gltf, app.graphicsDevice, function (roots) {
          // add the loaded scene to the hierarchy
          roots.forEach(function (root) {
            gltfRoot.addChild(root);
          });
        }, {
          basePath: '../assets/FlightHelmet/glTF/'
        });
      });

      var texCounter = 0;
      var loadedCubeFace = function() {
        texCounter++;
        if (texCounter === 6) {
            var cubemapAsset = new pc.Asset('pisa', 'cubemap', {
                url: "../assets/Pisa/playcanvas/pisa.dds"
              }, {
                "textures": [
                    app.assets.find("pisa_posx.jpg").id,
                    app.assets.find("pisa_negx.jpg").id,
                    app.assets.find("pisa_posy.jpg").id,
                    app.assets.find("pisa_negy.jpg").id,
                    app.assets.find("pisa_posz.jpg").id,
                    app.assets.find("pisa_negz.jpg").id
                ],
                "magFilter": 1,
                "minFilter": 5,
                "anisotropy": 1,
                "loadFaces": true,
                "name": "Pisa",
                //"rgbm": true,
                "prefiltered": "../assets/Pisa/playcanvas/pisa.dds"
            });
            app.scene.skyboxMip = 0;
            cubemapAsset.loadFaces = true

           app.assets.add(cubemapAsset);
           app.assets.load(cubemapAsset);
           this.app.assets.load(cubemapAsset)
           cubemapAsset.ready(function () {
               app.scene.setSkybox(cubemapAsset.resources);
           });
        }
      }
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_posx.jpg", 'texture', function (err, asset) {loadedCubeFace();});
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_negx.jpg", 'texture', function (err, asset) {loadedCubeFace();});
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_posy.jpg", 'texture', function (err, asset) {loadedCubeFace();});
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_negy.jpg", 'texture', function (err, asset) {loadedCubeFace();});
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_posz.jpg", 'texture', function (err, asset) {loadedCubeFace();});
      app.assets.loadFromUrl("../assets/Pisa/playcanvas/pisa_negz.jpg", 'texture', function (err, asset) {loadedCubeFace();});

      function createMaterial(colors) {
        var material = new pc.PhongMaterial();
        for (var param in colors) {
          material[param] = colors[param];
        }
        material.update();
        return material;
      }

      var xAxis = new pc.Entity();
      xAxis.addComponent("model", {
          type: "box"
      });
      xAxis.setLocalScale(0.4, 0.003, 0.003);
      xAxis.setLocalPosition(0.2, 0, 0);
      var material = createMaterial({
          diffuse: new pc.Color(0, 0, 0),
          emissive: new pc.Color(1, 0, 0),
      });
      xAxis.model.model.meshInstances[0].material = material;
      app.root.addChild(xAxis)

      var yAxis = new pc.Entity();
      yAxis.addComponent("model", {
          type: "box"
      });
      yAxis.setLocalScale(0.003, 0.4, 0.003);
      yAxis.setLocalPosition(0, 0.2, 0);
      var material = createMaterial({
          diffuse: new pc.Color(0, 0, 0),
          emissive: new pc.Color(0, 1, 0),
      });
      yAxis.model.model.meshInstances[0].material = material;
      app.root.addChild(yAxis)

      var zAxis = new pc.Entity();
      zAxis.addComponent("model", {
          type: "box"
      });
      zAxis.setLocalScale(0.003, 0.003, 0.4);
      zAxis.setLocalPosition(0, 0, 0.2);
      var material = createMaterial({
          diffuse: new pc.Color(0, 0, 0),
          emissive: new pc.Color(0, 0, 1),
      });
      zAxis.model.model.meshInstances[0].material = material;
      app.root.addChild(zAxis)
    </script>
</body>
</html>
